<template>
<div id="app">
    <h1>{{ msg }}</h1>
    <input v-model="userName" placeholder="请输入姓名" autocomplete>
    <input v-model="password" placeholder="请输入年龄" autocomplete>
    <button v-on:click="addUser">提交</button>

    <p>
        <button @click="changeMsg">点击</button>
    </p>
    <p>{{ msg1 }}</p>

</div>
</template>

<script>
// import axios from 'axios';
export default {
    name: 'Hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            userName: '',
            password: '',
            msg1:''
        }
    },
    methods: {
        addUser() {
            var name = this.userName;
            var password = this.password;
            this.$axios.post('http://127.0.0.1:4000/ login/addUser', {
                username: name,
                password: password
            }, {}).then((response) => { console.log(response); })
        },

        changeMsg() {
            this.$axios.get('http://127.0.0.1:4000/login/query')
                .then((response) => {
                    console.log(response.data[0])
                    console.log('--------')
                    // console.log(this);
                    this.msg1 = response.data[0];
                })
        },
    }

}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}

#nav a.router-link-exact-active {
    color: #42b983;
}
</style>
